<template>
	<view class="leave_box">
    <navTitle :title="'個人信息'"></navTitle>
    <view class="info-box">
      <view class="info-head" @tap="handleAvatar()">
        <img class="img-head" v-if="biographicalInfo.avatar" :src="`${$imgUrl}${biographicalInfo.avatar}`" mode="scaleToFill" alt="">
        <img class="img-head" v-else src="/static/images/user/icon_u_avater_default.png" mode="scaleToFill" alt="">
        <view class="head-name">
          <img src="/static/images/user/icon_u_info_upload.png" mode="scaleToFill" alt="">
          <view>上傳頭像</view>
        </view>
      </view>
      <view class="info-cell">
        <view class="info-row">
          <view class="r-p">姓名</view>
          <view class="r-input">
            <u-input class="u-m-r-10 u-flex-1" v-model.trim="biographicalInfo.realname" placeholder="請填寫姓名" :placeholderStyle="placeholderStyle" type="text"></u-input>
          </view>
        </view>
        <view class="info-row" @tap="handleSex()">
          <view class="r-p">性別</view>
          <view class="r-input">{{ sexList[sexIndex] }}</view>
        </view>
        <view class="info-row">
          <view class="r-p">出生年月</view>
          <view class="r-input">
            <uni-datetime-picker type="date" v-model="biographicalInfo.birthdate" placeholder="請選擇出生年月" @change="changeCalendar" />
          </view>
        </view>
        <view class="info-row" @tap="changeIdentity()">
          <view class="r-p">身份</view>
          <view class="r-input">
            <view v-if="identityIndex>-1">{{ identityList[identityIndex] }}</view>
            <view v-else :style="placeholderStyle">請選擇身份</view>
          </view>
        </view>
        <view class="info-row">
          <view class="r-p">參加工作時間</view>
          <view class="r-input">
            <uni-datetime-picker type="date" v-model="biographicalInfo.workdate" placeholder="請選擇參加工作時間" @change="changeCalendarWork" />
          </view>
        </view>
        <view class="info-row">
          <view class="r-p">手機號</view>
          <view class="r-input">
            <u-input class="u-m-r-10 u-flex-1" placeholder="請填寫姓名" v-model.trim="biographicalInfo.mobile" :placeholderStyle="placeholderStyle" type="text"></u-input>
          </view>
        </view>
        <view class="info-row">
          <view class="r-p">電子郵箱</view>
          <view class="r-input">
            <u-input class="u-m-r-10 u-flex-1" placeholder="請填寫電子郵箱" v-model.trim="biographicalInfo.email" :placeholderStyle="placeholderStyle" type="text"></u-input>
          </view>
        </view>
      </view>
      <view class="nav-footer" @tap="handleSubmit()">
        <view class="item-footer">提交</view>
      </view>
    </view>
	</view>
</template>

<script>
import navTitle from '../../boss/components/nav-title.vue';
import { userMyResume,userSaveModule } from '../../../utils/userApi'
export default {
	components: {navTitle},
	data() {
		return {
			placeholderStyle: "font-size: 15px; color:#999999;font-weight:400;",
      sexIndex:0,
      sexList:['男','女'],
      birthDate:'',//出生年月
      identityIndex:0,
      identityList:['職場人','學生'],
      workDate:'',//工作时间
      biographicalInfo:{},
      userInfo:{},
		};
	},
	props: {
	},
	computed: {},
  onShow() {
		this.userInfo=uni.getStorageSync('userInfo')
		this.getUserMyResume()
  },
	methods: {
    handleAvatar(){
      let that=this
      uni.chooseImage({
        sizeType: ["original", "compressed"],
        sourceType: ["camera", "album"],
        count:1,
        success: function (res) {
          const tempFiles = res.tempFiles
          const tempFilePaths = res.tempFilePaths
          uni.uploadFile({
            url: `${that.$imgUrl}/api/common/upload`,
            filePath: tempFilePaths[0],
            header: {
              token: uni.getStorageSync('token')
            },
            name: "file",
          }).then(res => {
            let data = JSON.parse(res.data)
            if(data.code==1){
              that.biographicalInfo.avatar=data.data.fullurl
            }else{
              uni.showToast({
                icon:'none',
                title: data.msg||'系統異常'
              })
            }
          })
        }
      })
    },
    handleSubmit(){
      if(!this.biographicalInfo.realname){
        uni.showToast({
          icon:'none',
          title: '請輸入姓名'
        })
      }
      if(!this.biographicalInfo.mobile){
        uni.showToast({
          icon:'none',
          title: '請輸入手機號'
        })
      }
      if(!this.biographicalInfo.email){
        uni.showToast({
          icon:'none',
          title: '請輸入電子郵箱'
        })
      }
      this.formSubmit()
    },
    async formSubmit(){
      let params={
        realname:this.biographicalInfo.realname,
        gender:parseInt(this.sexIndex+1),
        birthdate:this.biographicalInfo.birthdate,
        workdate:this.biographicalInfo.workdate,
        identity:parseInt(this.identityIndex+1),
        email:this.biographicalInfo.email,
        avatar:this.biographicalInfo.avatar,
        mobile:this.biographicalInfo.mobile,
      }
      let res=await userSaveModule(params)
			if(res.code==1){
				uni.showToast({
          icon:'none',
          title: '提交成功'
        })
        uni.navigateBack()
			}else{
				uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        })
			}
    },
    async getUserMyResume(){
      let res=await userMyResume()
			if(res.code==1){
				if(res.data.resume.id){
					this.biographicalInfo=res.data.resume.personal
          this.sexIndex=res.data.resume.personal.gender==1?0:1//1男 2女
				}
			}else{
				uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        })
			}
    },
    // 选择身份
    changeIdentity(){
      uni.showActionSheet({
        itemList: this.identityList,
        success: ({ tapIndex }) => {
          this.identityIndex=tapIndex
        },
        fail: (error) => {}
      })
    },
    changeCalendarWork(e) {
      this.biographicalInfo.workdate=e
		},
    changeCalendar(e) {
      this.biographicalInfo.birthDate=e
		},
    // 選擇性別day
    handleSex(){
      uni.showActionSheet({
        itemList: this.sexList,
        success: ({ tapIndex }) => {
          this.sexIndex=tapIndex
        },
        fail: (error) => {}
      })
    }
	}
};
</script>
<style lang="scss" scoped>
.leave_box{
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: #F4F6FA;
}
.info-box{
  width: calc(100% - 40px);
  margin: 10px auto 10px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
}
.info-head{
  .img-head{
    width: 58px;
    height: 58px;
    display: block;
    margin: 15px auto 10px;
    border-radius: 50%;
  }
  .head-name{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #666666;
    line-height: 18px;
    img{
      width: 14px;
      height: 14px;
      margin-right: 10px
    }
  }
}
.info-row{
  margin: 20px 0;
}
.r-p{
  font-size: 14px;
  color: #333333;
  line-height: 20px;
}
.r-input{
  height: 40px;
  width: calc(100% - 20px);
  border-radius: 8px;
  background: #F4F6FA;
  font-weight: bolder;
  font-size: 15px;
  color: #333333;
  line-height: 40px;
  margin-top: 10px;
  padding: 0 10px;
  .uni-date{
    width: calc(100% + 20px);
    margin-left: -10px;
    background: #F4F6FA;
  }
}
.nav-footer{
  width: 100%;
  height: 49px;
  overflow: hidden;
  margin-top: 20px;
}
.item-footer{
  width: calc(100% - 20px);
  height: 44px;
  background: linear-gradient( 90deg, #016CF1 0%, #0697F6 100%);
  border-radius: 8px;
  margin: 2px auto;
  font-weight: bold;
  font-size: 15px;
  color: #FFFFFF;
  line-height: 44px;
  text-align: center;
}
</style>
